<template>
  <!-- 商家店铺信息 -->
  <div id="DetailBaseShop">
    <div class="DetailBaseShop_head">
      <img :src="shopInfo.logo">
      <span class="shopInfo_name">{{shopInfo.name}}</span>
    </div>
      <div class="DetailBaseShop_cont">
        <div class="DetailBaseShop_cont_left">
          <div class="xiaoliang">
            <p>{{shopInfo.sells}}</p>
            <p>总销量</p>
          </div>
          <div class="baobei">
            <p>{{shopInfo.goodsCount}}</p>
            <p>全部宝贝</p>
          </div>
        </div>
        <div class="DetailBaseShop_cont_right">
          <ul>
            <li  v-for="(item,index) of shopInfo.score"
                 :key="index">
              {{item.name}}
              <span class="score">{{item.score}}</span>
              <span class="isBetter"
                    :class="[{'myTrue':item.isBetter},{'myFalse':!item.isBetter}]">
                {{item.isBetter?"高":"低"}}
              </span>
            </li>
          </ul>
        </div>
      </div>

    <div class="DetailBaseShop_btn">进店逛逛</div>
  </div>
</template>

<script>
export default {
  name: "DetailBaseShop",
  props:{
    shopInfo:{
      type:Object
    }
  }
}
</script>

<style scoped>
 #DetailBaseShop{
   position: relative;
   width: 100%;
   height: 220px;
   margin-top: -50px;
   padding: 0 20px;
   background-color: white;
}
.DetailBaseShop_head{
  position: relative;
  width: 100%;
  height: 60px;
  line-height: 60px;
}
.DetailBaseShop_head img{
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: 1px solid #cccccc;
}
.DetailBaseShop_head .shopInfo_name{
  position: absolute;
  margin-left: 10px;
  color: #666666;
}
.DetailBaseShop_cont{
  display: flex;
  width: 100%;
  height: 100px;
}
.DetailBaseShop_cont div{
  flex: 1;
}
.DetailBaseShop_cont .DetailBaseShop_cont_left{
  display: flex;
  padding-top: 15px;
  text-align: center;
  line-height: 30px;
  font-size: 17px;
  border-right: 2px solid #cccccc;
}
.DetailBaseShop_cont .DetailBaseShop_cont_left div{
  flex: 1;
}
.DetailBaseShop_cont .DetailBaseShop_cont_right{
  line-height: 20px;
  margin-left: 14px;
}
 .DetailBaseShop_cont .DetailBaseShop_cont_right ul li{
   margin-top: 10px;
 }
 .DetailBaseShop_cont .DetailBaseShop_cont_right .score{
   width: 40px;
   color: green;
   font-size: 17px;
   text-align: center;

 }
 .DetailBaseShop_cont .DetailBaseShop_cont_right .isBetter{
   position: absolute;
   right: 10px;
   padding: 2px;
   color: #FFFFFF;
 }
 .DetailBaseShop_btn{
   margin: 10px auto;
   width: 30%;
   height: 30px;
   line-height: 30px;
   text-align: center;
   font-size: 18px;
   letter-spacing: 1px;
   font-family: '幼圆';
   border: 1px solid #aaa;
   background-color: #eeeeee;
   border-radius: 20px;
 }

 .myTrue{
   background-color: deepskyblue;
 }
 .myFalse{
   background-color: deeppink;
 }
</style>
